import React, { Component } from "react"
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined
  } from '@ant-design/icons'
  import { Button, Menu } from 'antd'
export default class AntdMenu extends Component {
    
    state = {
        collapsed: false,
        items: [
            {key: '1', label: 'About'},
            {key: '2', label: 'Home'}
        ]
    }

    toggleCollapsed = () => {
        this.setState({
            collapsed: !this.state.collapsed
        })
    }
    onClick = (e) => {
      console.log('click ', e);
    }
    render() {
        const { collapsed, items } = this.state
        return (
            <div style={{ width: 256 }}>
            <Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}>
              {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            </Button>
            <Menu
              defaultSelectedKeys={['1']}
              mode="inline"
              theme="dark"
              inlineCollapsed={collapsed}
              items={items}
              onClick={this.onClick}
            />
          </div>
        )
    }
}